<template>
  <div>
    <div class="classMatesHead">
      <a href="#/Course" class="el-icon-back"></a>
      <a style="float: left">
        <el-button>{{selectedCourse.name}}</el-button>
      </a>
      <div class="MainHead">
        <div :class="{'MainHeadActive':isActive=='submitWork'}" v-if="currentUser.role=='student'"
             @click="active('submitWork')" style="width: 100px;height: 42px;float: left;">
          提交作业
        </div>
        <div :class="{'MainHeadActive':isActive=='studentWork'}" v-if="currentUser.role=='teacher'"
             @click="active('studentWork')" style="width: 100px;height: 42px;float: left;">
          学生作业
        </div>
        <div :class="{'MainHeadActive':isActive=='workChat'}" @click="active('workChat')"
             style="width: 100px;height: 42px;float: left">
          作业讨论
        </div>

        <el-menu mode="horizontal" style="position: absolute;top: 10px;right: 20px">
          <Tools></Tools>
        </el-menu>
      </div>
    </div>
    <div v-if="isActive=='submitWork'" class="workBox">
      <!--    <el-image src="https://www.ketangpai.com/Public/Home/img/zye.png"></el-image>-->
      <div
        style="width: 80%;margin-left: auto;margin-right: auto;height: 65px;border-radius: 20px;border: lightslategrey solid 1px;margin-top: 55px">

      </div>
      <div style="width: 80%;margin-left: auto;margin-right: auto;height: auto;text-align: left">
        <h3 style="font-weight: 400">{{work.workName}}</h3>
        <p style="color:#5F6368 ">{{work.optDet}}</p>
        <p style="font-size: 14px;color: #5F6368;">
          <span style="background-color: #F1F3F4;">截至日期：{{work.endTime|formatDate("yyyy-MM-dd HH:mm")}}</span>
          <span style="margin-left: 10px;background-color: #F1F3F4;">{{work.workType}}</span>
          <span style="margin-left: 10px;background-color: #F1F3F4;">需要查重</span>
        </p>
        <div style="width: 100%;height: auto">
          <el-button v-if="isUpload" @click="upload()" type="primary" style="margin-top: 20px;width: 100px">提交
          </el-button>
          <el-button v-if="!isUpload" type="primary" @click="updateSubmission()" style="margin-top: 20px;width: 100px">更新提交
          </el-button>
          <label
            style="float: right;line-height: 90px">{{ownWork.status}}</label>
        </div>
        <div
          style="width: 100%;height: auto;margin-top: 20px;border: #9A9A9A solid 1px;border-radius: 10px;padding: 20px">
          <!--        <div class="fileContainer" >-->
          <!--          &lt;!&ndash;      //选择文件的框&ndash;&gt;-->
          <!--          <div style="position: relative;width: 200px;height: 80px;border-radius: 10px;border: #9A9A9A solid 1px">-->
          <!--          <input class="choiceFileInput"  type="file" ref="clearFile" @change="getFile($event)" multiple="multiple"  />-->
          <!--          </div>-->

          <!--          &lt;!&ndash;      //列表显示选择的文件&ndash;&gt;-->
          <ul v-if="!isUpload" class="fileul">
            <li class="fileli" v-for="(file,index) in workFileList" :key="file.id">
              <div style="width: 300px;height: 80px;border: #9A9A9A solid 1px;margin: 10px;border-radius: 15px">
                <img style="float: left;padding: 6px" v-if="file.fileName.indexOf('.xls')!=-1"
                     src="../../assets/file/file_ext_big_xls.png" width="70px" height="70"></img>
                <img style="float: left;padding: 6px" v-else-if="file.fileName.indexOf('.doc')!=-1"
                     src="../../assets/file/file_ext_big_docx.png" width="70px" height="70"></img>
                <img style="float: left;padding: 6px" v-else
                     src="../../assets/file/file.png" width="70px" height="70"></img>
                <div style="float: left;width: 180px;text-align: left;padding-left: 20px;font-size: 14px">
                  <div style="width: 200px;height: 30px;padding-top: 10px">
                    <a class="downLink" :href="'http://localhost:8080/upload/download?fileName='+file.filePath">{{file.fileName}}</a>
                  </div>
                  <div style="width: 200px;height: 26px;padding-top: 10px">
                    <el-button style="float: right;margin-right: 30px" @click="deleteFile(file,index)" type="text">删除</el-button>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <el-upload
            v-if="isUpload"
            ref="upload"
            action="#"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :auto-upload="false"
            :file-list="fileList"
            class="upload-demo"
            drag
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </div>
      </div>


    </div>
    <div v-if="isActive=='studentWork'" class="workBox">
      <!--    <el-image src="https://www.ketangpai.com/Public/Home/img/zye.png"></el-image>-->

      <div
        style="width: 80%;height: 500px;  box-shadow:2px 2px 10px #909090;margin-top: 50px;border-radius: 10px;padding-top: 50px">
        <el-table
          :data="studentWorks"
          border
          style="width: 1080px">
          <el-table-column
            prop="studentId"
            label="学号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="studentName"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="grade"
            label="成绩"
            width="120">
          </el-table-column>
          <el-table-column
            prop="status"
            label="提交状态"
            width="120">
            <template slot-scope="scope">
              <span :class="{'warningStatus':scope.row.status=='未交'} ">{{ scope.row.status}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="correctTimes"
            label="批改次数"
            width="120">
          </el-table-column>
          <el-table-column
            label="提交时间"
            width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.date|formatDate("yyyy-MM-dd HH:mm")}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="批改时间"
            width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.correctDate|formatDate("yyyy-MM-dd HH:mm")}}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status=='待批改'||scope.row.status=='已批改'" @click="correctWorkDialogShow(scope.row)" type="text" size="small">批阅</el-button>
              <el-button  type="text" size="small" v-if="scope.row.status == '未交'">催交</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog :title="'批改作业(学生:'+correctingWork.studentName+')'" :visible.sync="correctDialog">
          <div style="width: 100%;height: 300px">
            <ul  class="fileul">
              <li class="fileli" v-for="(file,index) in correctStudentWorks" :key="file.id">
                <div style="width: 300px;height: 80px;border: #9A9A9A solid 1px;margin: 10px;border-radius: 15px">
                  <img style="float: left;padding: 6px" v-if="file.fileName.indexOf('.xls')!=-1"
                       src="../../assets/file/file_ext_big_xls.png" width="70px" height="70"></img>
                  <img style="float: left;padding: 6px" v-else-if="file.fileName.indexOf('.doc')!=-1"
                       src="../../assets/file/file_ext_big_docx.png" width="70px" height="70"></img>
                  <img style="float: left;padding: 6px" v-else
                       src="../../assets/file/file.png" width="70px" height="70"></img>
                  <div style="float: left;width: 180px;text-align: left;padding-left: 20px;font-size: 14px">
                    <div style="width: 200px;height: 30px;padding-top: 10px">
                      <a  class="downLink" :href="'http://localhost:8080/upload/download?fileName='+file.filePath">{{file.fileName}}</a>
                    </div>

                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="demo-input-suffix">
            评分：
            <el-input
              type="number"
              style="width: 76%"
              placeholder="请打分数"
              v-model="correctingWork.grade"
             >
            </el-input>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="correctDialog = false">取 消</el-button>
            <el-button type="primary" @click="correctWork()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div v-if="isActive=='workChat'" class="discuss">
      <div class="discussionBox">
        <div class="discussionBoxHead">
          <h3 style="position: absolute;top: 4px;left: 50px;font-weight: 400">{{workDate.workName}}</h3>
          <p style="position: absolute;top: 60px;left: 52px;font-size: 13px;color:#c1bdbd;">截至：{{workDate.endTime}}</p>
          <p style="position: absolute;top: 95px;left: 54px">{{workDate.optDet}}</p>
          <div
            style="position: absolute;top: 80px;right: 20px;display: block;width: 200px;height: 30px;font-size: 13px">
            <div
              style="display: inline-block;background: url(https://www.ketangpai.com/Public/Home/img/downg.png) left no-repeat;padding-left: 12px;color: #666">
              下载讨论内容
            </div>
            <div
              style="display: inline-block;width: 62px;height: 22px;background: #357ae8;margin-left: 10px;color: white;    border: 1px solid #357ae8;line-height: 22px;border-radius: 5px">
              展示词云
            </div>
          </div>
          <hr class="bottomHr">
        </div>
        <div CLASS="discussionBoxBottom">
          <el-avatar></el-avatar>
          <p @click="addCommentShow=true" v-show="!addCommentShow" class="addComments">添加评论</p>
          <el-input v-model="comment.content" v-show="addCommentShow"></el-input>
          <el-button @click="addCommentShow=false" class="addCommentCancel" v-show="addCommentShow">取消</el-button>
          <el-button class="addCommentFix" @click="addComment" v-show="addCommentShow">确定</el-button>
        </div>

        <div class="commentsBox" v-for="comment in commentsData">
          <hr>
          <el-avatar :src=headerUrl></el-avatar>
          <span class="commentsName">{{comment.name}}</span>
          <p class="commentsData">{{comment.date}}</p>
          <p class="commentContent">{{comment.content}}</p>
          <span v-show="deleteJurisdiction(comment.account)" @click="deleteComment(comment.id)" style="cursor: pointer"
                class="el-icon-delete"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Tools from "../../components/Tools";
  import axios from "axios";
  import http from "../../utils/http";

  export default {
    name: "OperationDetails",
    components: {
      Tools
    },
    data() {
      return {
        currentWorkId: 0,
        work: {},
        fileList: [],
        isUpload: true,
        workFileList: [],
        studentWorkStatus: "",
        currentUser: this.$store.getters.getUser,
        selectedCourse: this.$store.getters.getCourse,
        isActive: this.$store.getters.getUser.role == 'teacher' ? 'studentWork' : 'submitWork',
        addCommentShow: false,
        //批改作业
        correctDialog:false,
        correctStudentWorks:[],
        correctGrade:0,
        correctingWork:{},
        imgHeadUrl: 'cccccccccccccccscdsafdfd',
        workDate: {},
        //学生作业情况
        studentWorks: [],
        //学生自己的作业情况
        ownWork:{},
        comment: {
          workId: 0,
          name: "",
          date: '',
          content: '',
          account: '',

        },
        commentsData: [
          {
            name: "张洪",
            date: '10月23日  23：59',
            content: '好好好'

          },
          {
            name: "小陈",
            date: '10月23日  23：59',
            content: '非常好'

          }
        ],
      }
    },

    created() {

      this.currentWorkId = this.$route.query.workId
      this.getWorkInfo();
      if (this.currentUser.role == "student") {
        this.getWorkFile()
        this.getOneStudentWork(this.currentWorkId,this.currentUser.studentId)
      }
      if (this.currentUser.role == "teacher") {
        this.getStudentWork();
      }
    },
    methods: {
      //点击每行
      handleClick(row) {
        console.log(row);
      },
      //批改作业弹窗
      correctWorkDialogShow(row){
        this.correctDialog=true
        this.getStudentWorkFile(row.studentId)
        this.correctingWork =row;
      },
      //批改作业
      correctWork(){
        if(this.correctingWork.grade>100 || this.correctingWork.grade<0){
          this.$message.warning("批改分数不合法，分数区间0-100");
          return
        }
        http.get('teacher/correctWork',{
          workId:this.currentWorkId,
          studentId:this.correctingWork.studentId,
          grade:this.correctingWork.grade,
        }).then((res)=>{
          if (res.data.code == 200) {
            this.$message.success(res.data.message);
            this.correctDialog=false
            this.getStudentWork()
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      updateSubmission(){
          if(this.ownWork.status=='已批改'){
            this.$message.warning("你的作业已经被批改，不可以再更新")
            return
          }
          this.isUpload=true

      },


      getStudentWorkFile(studentId){
        http.get("/course/getWorkFileByStudent",{studentId:studentId,workId:this.currentWorkId}).then((res)=>{
          this.correctStudentWorks=res.data;
        })
      },
      getStudentWork() {
        http.get("course/getStudentWorkById", {workId: this.currentWorkId}).then((res) => {
          this.studentWorks = res.data
          console.log(res.data)
        })
      },
      deleteFile(file, index) {
        if(this.ownWork.status=='已批改'){
          this.$message.warning("你的作业已经被批改，不可以再更新")
          return
        }
        this.workFileList.splice(index, 1)
        http.get("course/deleteWorkFile", {fileId: file.eid}).then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.message);
            if (this.workFileList.length == 0) {
              http.get("course/updateWorkStatus",
                {
                  workId: this.currentWorkId,
                  studentId: this.currentUser.studentId,
                  status: '未完成'
                }).then((res) => {
                  this.getOneStudentWork(this.currentWorkId,this.currentUser.studentId)
              })
              this.isUpload = true
            }
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      getWorkInfo() {
        console.log(this.currentWorkId)
        http.get("/course/getWorkById", {workId: this.currentWorkId}).then((res) => {
          this.work = res.data
          console.log(this.work)
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handleChange(file, fileList) {
        this.fileList = fileList;
      },
      handlePreview(file) {
        console.log(file);
        // window.open(file)
        const a = document.createElement('a');
        // 创建一个点击事件
        const event = new MouseEvent('click');
        // 将 a 的 download 属性设置为我们想要下载的图片的名称，若 name 不存在则使用'图片'作为默认名称
        a.download = file.name || '图片';
        // 将生成的 URL 设置为 a.href 属性
        a.href = file.url;
        // 触发 a 的点击事件
        a.dispatchEvent(event);
      },
      upload() {
        if (this.fileList == 0) {
          this.$message.warning("你还未选择文件")
          return
        }
        let fileList = this.fileList;
        let files = [];
        let fd = new FormData();//通过form数据格式来传
        console.log(fileList)
        for (let i = 0; i < fileList.length; i++) {
          fd.append("files", fileList[i].raw); //传文件
        }
        console.log(files)

        // fd.append("files",files); //传文件
        fd.append('workId', this.currentWorkId)
        fd.append('studentId', this.currentUser.studentId)
        console.log(fd)
        http.upload('/upload/uploadWork', fd, {
          'Content-Type': 'multipart/form-data'
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.message);
            this.isUpload = false
            this.getWorkFile()
            this.fileList = []
            this.getOneStudentWork( this.currentWorkId,this.currentUser.studentId)
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      getWorkFile() {
        http.get('course/getWorkFileByStudent', {
          studentId: this.currentUser.studentId,
          workId: this.currentWorkId
        }).then((res) => {
          console.log(res.data)
          if (res.data.length != 0) {
            this.studentWorkStatus = "完成"
            this.isUpload = false
          } else {
            this.studentWorkStatus = "未完成"
            this.isUpload = true
          }
          this.workFileList = res.data
          console.log(this.workFileList)
        })
      },
      getOneStudentWork(workId,studentId){
        http.get('course/getStudentWork',{workId:workId,studentId:studentId}).then((res) => {
          this.ownWork=res.data
        })
      },
      getHead() {
        const _this = this;
        this.axios.get('http://localhost:8080//getHeadUrl?account=' + this.$cookies.get("account")).then(function (resp) {
          //回调函数中的this指的是回调
          //把data数据赋给_this，即vue对象
          _this.imgHeadUrl = resp.data
          console.log(resp.data)
        })
      },
      //时间格式化
      getTime(value) {
        const dt = new Date(value);
        var year = dt.getFullYear(); //年
        var month = dt.getMonth() + 1; //月
        var date = dt.getDate(); //日
        var hour = dt.getHours(); //
        var minute = dt.getMinutes(); //
        var second = dt.getSeconds(); //
        month = month < 10 ? "0" + month : month;
        date = date < 10 ? "0" + date : date;
        hour = hour < 10 ? "0" + hour : hour;
        minute = minute < 10 ? "0" + minute : minute;
        second = second < 10 ? "0" + second : second;
        var str = year + "-" + month + "-" + date + "  " + hour + ":" + minute + ":" + second;
        return str;
      },
      active(value) {
        this.isActive = value
      },
      deleteJurisdiction(account) {
        if (this.$cookies.get("accountType") == 'teacher') {
          return true;
        } else if (this.$cookies.get("account") == account) {
          return true;
        } else {
          return false;
        }

      },

      getComment() {
        const _this = this;
        this.axios.get('http://localhost:8080/getComments?workId=' + this.$cookies.get("work").id).then(function (resp) {
          //回调函数中的this指的是回调
          //把data数据赋给_this，即vue对象
          _this.commentsData = resp.data
        })
      },
      addComment() {
        this.comment.date = this.getTime(new Date())
        axios.post('http://localhost:8080/addComment', this.comment)
          .then((response) => {
            this.$message({
              message: "评论成功",
              type: 'success'
            });
            this.addCommentShow = false
            this.comment.content = "",
              this.getComment();
          })

      },
      deleteComment(value) {
        this.axios.get('http://localhost:8080/deleteComments?id=' + value).then((resp) => {
          this.getComment();
          this.$message({
            type: 'success',
            message: '评论删除成功'
          })
        })
      }

    }
  }
</script>
<style scoped>
  .classMates {
    width: 1520px;
    height: auto;
  }

  .classMatesHead {
    width: 1520px;
    height: 50px;
    padding-top: 20px;
    border-bottom: #9A9A9A solid 1px;
  }

  .el-icon-back {
    margin-right: 20px;
    margin-left: 20px;
    font-size: 30px;
    font-weight: 600;
    float: left;
    margin-top: 5px;
    text-decoration: none;
    color: black;
    cursor: pointer;
  }

  .classMatesHead .el-button {
    border-radius: 60px;
    background-color: #2C58AB;
    color: white;
  }

  .classMatesHead .MainHead {
    width: 300px;
    height: 45px;
    padding-top: 5px;
    cursor: pointer;
  }

  .classMatesHead .el-submenu {
    width: 80px;
  }

  .MainHeadActive {
    border-bottom: #569fe0 solid 4px;
  }

  .workBox {
    width: 1520px;
    height: 600px;
  }

  .discuss {
    width: 1520px;
    height: auto;
  }

  .discussionBox {
    margin-top: 100px;
    width: 810px;
    height: auto;
    min-height: 261px;
    position: relative;
    border-radius: 10px;
    border: #9A9A9A solid 1px;
  }

  .discussionBoxHead {
    height: 180px;
    width: 810px;
  }

  .discussionBoxBottom {
    height: 100px;
    width: 810px;
  }

  .bottomHr {
    width: 740px;
    position: absolute;
    top: 162px;
    left: 30px;
    opacity: 0.5;
  }

  .discussionBoxBottom .el-avatar {
    position: absolute;
    top: 190px;
    left: 40px;
  }

  .addComments {
    position: absolute;
    top: 176px;
    left: 98px;
    font-size: 16px;
    color: grey;;
  }

  .discussionBoxBottom .el-input {
    width: 650px;
    position: absolute;
    top: 190px;
    left: 120px;
  }

  .addCommentCancel {
    position: absolute;
    top: 236px;
    right: 175px;
  }

  .addCommentFix {
    position: absolute;
    top: 236px;
    right: 72px;
  }

  .commentsBox {
    width: 810px;
    position: relative;
    height: 100px;
  }

  .commentsBox hr {
    width: 750px;
    opacity: 0.5;
  }

  .commentsBox .el-avatar {
    position: absolute;
    top: 30px;
    left: 50px;

  }

  .commentsName {
    position: absolute;
    top: 23px;
    left: 110px;
  }

  .commentsData {
    color: #c1bdbd;
    position: absolute;
    left: 170px;
    font-size: 14px;;
  }

  .commentContent {
    position: absolute;
    top: 35px;
    left: 110px;
  }

  .commentsBox .el-icon-delete {
    position: absolute;
    top: 40px;
    right: 50px;
  }
</style>
<style>
  .workBox .el-image__inner {
    margin-top: 140px !important;
  }

  .fileContainer {
    width: 300px;
    text-align: left;
  }

  。uploadButton {
    position: relative;
    width: 200px;
    height: 80px;
    border-radius: 10px;
    border: #9A9A9A solid 1px
  }

  .choiceFileInput {
    width: 100%;
    height: 11px;
    padding: 15px;
    opacity: 0;
    z-index: 9999;
  }

  .fileul {
    list-style-type: none;
  }

  .fileli {
    font-size: 14px;
    min-height: 30px;
    /*float: left;*/
    display: inline-block;
  }

  .deletebtn {
    float: right;
    border: none;
  }
  .downLink{
    color: black;
    text-decoration: none;
  }
  .downLink:hover{
    color: #7caedb;
  }
  .warningStatus{
    color: red;
  }
</style>

